<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="onSubmit">
            <!--事件-->
            <el-form label-position="right" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="开始时间">
                        <el-date-picker
                            v-model="queryParams.beginActionTime"
                            type="datetime"
                            style="width:80%;"
                            placeholder="选择日期时间"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结束时间">
                        <el-date-picker
                            style="width:80%;"
                            v-model="queryParams.endActionTime"
                            type="datetime"
                            placeholder="选择日期时间"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="操作类型">
                        <DictSelect
                            v-model="queryParams.optionType"
                            :data="options.optionType"
                            style="width:80%;"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item :label="$t('minor.major.minorGrade')">
                        <el-date-picker
                            v-model="queryParams.minorGrade"
                            value-format="yyyy"
                            type="year"
                            clearable
                            :placeholder="$t('message.plzSelect')"
                            @change="majorNameChange"
                            style="width: 80%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('minor.major.college')">
                        <DictSelect
                            @change="majorNameChange"
                            v-model="queryParams.collegeCode"
                            :data="options.college"
                            :clearable="true"
                            :filterable="true"
                            style="width: 80%;"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="辅修专业">
                        <DictSelect
                            v-model="queryParams.major"
                            :data="options.majorName"
                            :clearable="true"
                            :filterable="true"
                            style="width:80%;"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="操作人">
                        <el-input v-model="queryParams.actionName" style="width:80%;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            </el-form>
        </condition-card>
        <el-card shadow="never">
            <div class="first_title">操作日志</div>
            <div class="btn">
                <el-button type="primary" @click="exportExcel">{{$t('minor.course.exportBtn')}}</el-button>
            </div>
            <EduTable
                :selection="false"
                @page-change="pageChange"
                :data="tableData"
                :order="false"
                :total="total"
                :pageSize="pageSize"
                :pageNum="pageNum"
            >
                <el-table-column
                    align="center"
                    label="操作时间"
                    prop="operationTime"
                    show-overflow-tooltip
                    min-width="180"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="IP地址"
                    prop="ip"
                    show-overflow-tooltip
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="操作人姓名"
                    prop="actionName"
                    show-overflow-tooltip
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="操作人工号/学号"
                    prop="actionNo"
                    show-overflow-tooltip
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="学院"
                    prop="collegeName"
                    show-overflow-tooltip
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="专业"
                    prop="majorName"
                    show-overflow-tooltip
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="操作类型"
                    prop="optionType"
                    show-overflow-tooltip
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="学生姓名"
                    prop="studentName"
                    show-overflow-tooltip
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="学生学号"
                    prop="studentId"
                    show-overflow-tooltip
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="辅修专业"
                    prop="minorMajorName"
                    show-overflow-tooltip
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    :label="$t('minor.major.college')"
                    prop="minorCollegeName"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="辅修专业所属学校"
                    prop="minorSchoolName"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    align="center"
                    show-overflow-tooltip
                    label="辅修年级"
                    prop="minorGrade"
                    min-width="150"
                ></el-table-column>
            </EduTable>
        </el-card>
    </div>
</template>

<script>
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import { queryProfessionByCollege } from "common/src/api/minor/minorCultureScheme";
import {
    findMinorCultureLogList,
    getOptionTypeList,
    exportOption
} from "common/src/api/minor/minorCulturePlanManager";
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            options: {
                college: [],
                optionType: [],
                majorName: []
            },
            queryParams: {
                beginActionTime: "",
                endActionTime: "",
                optionType: "",
                collegeCode: "",
                major: "",
                actionName: "",
                minorGrade: '',
            },
            oldQueryParams: {},
            pageNum: 1,
            pageSize: 20
        };
    },
    mounted() {
        if (!this.$checkMinor()) return;
        this.getOptions();
        this.getOptionTypeList();
        this.getTemplate();
    },
    methods: {
        getTemplate() {
            if (!this.$checkMinor()) return;
            let data = {
                pageNum_: this.pageNum,
                pageSize_: this.pageSize
            };
            let params = Object.assign({}, data, this.queryParams);
            findMinorCultureLogList(params).then(({ code, data }) => {
                if (code === 200) {
                    this.tableData = data.list.map(el => {
                        if (el.actionTime) {
                            el.operationTime = moment(
                                parseInt(el.actionTime)
                            ).format("YYYY-MM-DD HH:mm:SS");
                        }
                        return el;
                    });
                    this.total = data.total_;
                }
            });
        },
        getOptionTypeList() {
            getOptionTypeList().then(({ code, data }) => {
                if (code == 200) {
                    this.options.optionType = data.map(keys => {
                        for (let key in keys) {
                            return {
                                label: keys[key],
                                value: key
                            };
                        }
                    });
                }
            });
        },
        getOptions() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX"]
            };
            queryDic(data).then(res => {
                this.options.college = [];
                UTILS.fillSelect(
                    {
                        college: "X_YX"
                    },
                    res.data,
                    this.options
                );
            });
        },
        majorNameChange() {
            let params = {
                collegeCode: this.queryParams.collegeCode,
                minorGrade: this.queryParams.minorGrade * 1
            };
            if (!params.minorGrade && !params.collegeCode) {
                this.queryParams.major = "";
                this.options.majorName = [];
                return;
            }
            queryProfessionByCollege(params).then(res => {
                if (res.code == 200) {
                    this.queryParams.major = "";
                    this.options.majorName = res.data.map(el => {
                        return el;
                    });
                }
            });
        },
        onSubmit() {
            if (this.queryParams.beginActionTime) {
                this.queryParams.beginActionTime = moment(
                    this.queryParams.beginActionTime
                ).valueOf();
            }
            if (this.queryParams.endActionTime) {
                this.queryParams.endActionTime = moment(
                    this.queryParams.endActionTime
                ).valueOf();
            }
            this.pageNum = 1;
            this.oldQueryParams = Object.assign({}, this.queryParams);
            this.getTemplate();
        },
        pageChange({ pageSize, pageNum }) {
            this.pageSize = pageSize;
            this.pageNum = pageNum;
            this.getTemplate();
        },
        reset() {
            this.queryParams = {
                beginActionTime: "",
                endActionTime: "",
                optionType: "",
                collegeCode: "",
                major: "",
                actionName: "",
                minorGrade: ''
            };
            this.pageNum = 1;
            this.majorNameChange();
            this.getTemplate();
        },
        exportExcel() {
            if (!this.$checkMinor()) return;
            let data = {
                pageNum_: this.pageNum,
                pageSize_: this.pageSize
            };
            let params = Object.assign({}, data, this.queryParams);
            this.$eduConfirm("您确定要导出吗", "导出").then(() => {
                window.open(exportOption(params));
            });
        }
    }
};
</script>

<style scoped>
.first_title {
    font-size: 18px;
    font-family: "微软雅黑";
    color: #2b3b4e;
    padding: 0px 0px 16px;
}
.btn {
    text-align: right;
    padding: 0px 0px 16px;
}
</style>
